<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 汉中旅游</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body class="login-page">
    <div class="login-container">
        <div class="login-form-wrapper">
            <div class="login-logo">
                <img src="img/attractions/logo.jpg" alt="汉中旅游">
                <h2>注册新用户</h2>
            </div>
            <form id="register-form">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" name="username" required>
                </div>
                <div class="form-group">
                    <label for="email">电子邮箱</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" required>
                </div>
                <div class="form-group">
                    <label for="confirm-password">确认密码</label>
                    <input type="password" id="confirm-password" name="confirm-password" required>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn login-btn">注册</button>
                </div>
            </form>
            <div id="message-area" class="message-area"></div>
            <div class="login-footer">
                <p>已有账号? <a href="login.html">立即登录</a></p>
                <p><a href="index.html">返回首页</a></p>
            </div>
        </div>
    </div>
    
    <script>
        document.getElementById('register-form').addEventListener('submit', async function(event) {
            event.preventDefault();

            const username = document.getElementById('username').value;
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirm-password').value;
            const messageArea = document.getElementById('message-area');
            const submitButton = this.querySelector('button[type="submit"]');

            messageArea.textContent = '';
            messageArea.className = 'message-area';

            if (password !== confirmPassword) {
                messageArea.textContent = '两次输入的密码不一致！';
                messageArea.classList.add('error');
                return;
            }

            submitButton.disabled = true;
            submitButton.textContent = '注册中...';

            try {
                const response = await fetch('/api/auth/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ username, password, email }),
                });

                const responseText = await response.text();

                if (response.ok) {
                    messageArea.textContent = '注册成功！将跳转到登录页面。';
                    messageArea.classList.add('success');
                    setTimeout(() => {
                        window.location.href = 'login.html';
                    }, 2000);
                } else {
                    messageArea.textContent = '注册失败: ' + responseText;
                    messageArea.classList.add('error');
                }
            } catch (error) {
                console.error('注册请求失败:', error);
                messageArea.textContent = '注册请求失败，请检查网络或联系管理员。';
                messageArea.classList.add('error');
            } finally {
                if(!messageArea.classList.contains('success')) {
                    submitButton.disabled = false;
                    submitButton.textContent = '注册';
                }
            }
        });
    </script>
    
    <!-- reusing styles from login page -->
    <style>
        .login-page {
            background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('img/hanzhong-background.jpg');
            background-size: cover;
            background-position: center;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .login-container { width: 100%; max-width: 400px; }
        .login-form-wrapper { background-color: white; padding: 40px; border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }
        .login-logo { text-align: center; margin-bottom: 30px; }
        .login-logo img { height: 60px; width: auto; max-width: 100%; object-fit: contain; }
        .login-logo h2 { color: #e74c3c; margin-top: 10px; }
        .login-btn { width: 100%; padding: 12px; margin-top: 10px; background-color: #DC4E42; }
        .login-footer { text-align: center; margin-top: 30px; font-size: 14px; color: #666; }
        .login-footer a { color: #e74c3c; text-decoration: none; }
        .login-footer a:hover { text-decoration: underline; }
        .form-group { margin-bottom: 20px; }
        label { display: block; margin-bottom: 8px; font-weight: bold; }
        input[type="text"], input[type="email"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
    </style>
</body>
</html> 